<template>
  <div>
    <u-cell-group :border="false">
      <required-parameter />
      <!--      <cus-cell title="复选框激活颜色" :border="false">-->
      <!--        <div-->
      <!--          class="u-slot-color"-->
      <!--          v-if="-->
      <!--            editConfigCom.attribute &&-->
      <!--            editConfigCom.attribute.hasOwnProperty('checkboxGroupProps') &&-->
      <!--            editConfigCom.attribute.checkboxGroupProps.activeColor-->
      <!--          "-->
      <!--        >-->
      <!--          &lt;!&ndash;            <u-button @click="open" type="primary">重置</u-button>&ndash;&gt;-->
      <!--          <div @click="resetColor" class="resetColor">重置</div>-->
      <!--          <div-->
      <!--            @click="open('colorPicker')"-->
      <!--            class="color-box"-->
      <!--            :style="{-->
      <!--              backgroundColor:-->
      <!--                editConfigCom.attribute.checkboxGroupProps.activeColor,-->
      <!--            }"-->
      <!--          ></div>-->
      <!--        </div>-->
      <!--        <div class="color-picker">-->
      <!--          <div class="color-picker-container">-->
      <!--            <t-color-picker-->
      <!--              ref="colorPicker"-->
      <!--              :color="activeColor"-->
      <!--              @confirm="confirm"-->
      <!--            ></t-color-picker>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </cus-cell>-->
      <cus-cell
        title="选项"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('options')
        "
      >
        <div class="u-slot-value">
          <draggable v-model="editConfigCom.attribute.options">
            <div
              v-for="(item, index) in editConfigCom.attribute.options"
              :key="item.name"
              class="u-slot-value u-slot-checkbox-list"
            >
              <div :border="false">
                <div
                  slot="title"
                  style="display: flex; align-items: center"
                  class="item"
                >
                  <!--                  <tooltip-->
                  <!--                    direction="bottom"-->
                  <!--                    :buttons="['删除']"-->
                  <!--                    @click="onClickToolTip($event, index)"-->
                  <!--                  >-->
                  <!--                    <div style="transform: rotate(90deg)">-->
                  <!--                      <u-icon name="more-dot-fill" />-->
                  <!--                    </div>-->
                  <!--                  </tooltip>-->
                  <div style="transform: rotate(90deg)">
                    <u-icon name="more-dot-fill" />
                  </div>
                  <span>选项</span>
                </div>
                <div
                  class="item"
                  v-if="
                    editConfigCom.attribute &&
                    editConfigCom.attribute.hasOwnProperty('options')
                  "
                >
                  <div style="display: flex; align-items: center">
                    <text style="width: 50px">标题</text>
                    <u--input
                      style="height: 20px"
                      placeholder="请输入标题"
                      v-model="item.label"
                      maxlength="30"
                      @blur="onInputOptionTitle(item.label, index)"
                    ></u--input>
                  </div>
                </div>
                <div class="flexAIC item">
                  <block
                    v-if="
                      editConfigCom.attribute &&
                      editConfigCom.attribute.hasOwnProperty('value')
                    "
                  >
                    <u-icon
                      v-if="
                        editConfigCom.attribute.value &&
                        editConfigCom.attribute.value.includes(item.name)
                      "
                      name="checkmark-circle-fill"
                      :color="$theme.themeColor.primary"
                      size="20"
                      @click="onClickHandleValues(false, item.name)"
                    />
                    <div
                      class="circle"
                      v-else
                      @click="onClickHandleValues(true, item.name)"
                    ></div>
                  </block>

                  <span>是否默选</span>
                  <!--                  <u-radio-group-->
                  <!--                    v-model="editConfigCom.attribute.value[index]"-->
                  <!--                    placement="column"-->
                  <!--                    size="15"-->
                  <!--                  >-->
                  <!--                    <u-radio :key="index" label="是否默选" :name="item.name">-->
                  <!--                    </u-radio>-->
                  <!--                  </u-radio-group>-->
                </div>
              </div>
              <u-icon
                name="close-circle"
                class="del"
                size="20"
                @click="onDeleteItem(index)"
                v-if="editConfigCom.attribute.options.length > 2"
              ></u-icon>
            </div>
          </draggable>
        </div>
      </cus-cell>

      <u-button icon="plus" @click="onClickAddNewOption">新增一个选项</u-button>
      <!--      <cus-cell-->
      <!--        title="布局方式"-->
      <!--        :border="false"-->
      <!--        v-if="-->
      <!--          editConfigCom.attribute &&-->
      <!--          editConfigCom.attribute.hasOwnProperty('checkboxGroupProps') &&-->
      <!--          editConfigCom.attribute.checkboxGroupProps.hasOwnProperty('placement')-->
      <!--        "-->
      <!--      >-->
      <!--        <div>-->
      <!--          <u-radio-group-->
      <!--            v-model="editConfigCom.attribute.checkboxGroupProps.placement"-->
      <!--            placement="row"-->
      <!--            :activeColor="$theme.themeColor.primary"-->
      <!--          >-->
      <!--            <u-radio label="横向" name="row" style="margin-right: 10px" />-->
      <!--            <u-radio label="纵向" name="column" />-->
      <!--          </u-radio-group>-->
      <!--        </div>-->
      <!--      </cus-cell>-->
    </u-cell-group>
  </div>
</template>

<script>
import tooltip from "@/components/toolTip";
import requiredParameter from "@/components/cusFormConfig/requiredParameter";
import tColorPicker from "@/components/t-color-picker/t-color-picker";
import {
  handleGetRgbaObject,
  handleGetToRgba,
} from "@/pages/index/components/editAttributeArea/utils/handleRgba";
export default {
  components: { tooltip, tColorPicker, requiredParameter },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      activeColor: "",
      originalColor: "",
    };
  },
  created() {
    this.handleActiveColor();
  },
  methods: {
    onInputOptionTitle(val, index) {
      this.editConfigCom.attribute.options[index].name = val;
    },
    onClickAddNewOption() {
      let text = "选项" + this.editConfigCom.attribute.options.length;
      const isHasItem =
        this.editConfigCom.attribute.options.filter((v) => v.name === text)
          .length > 0;
      //判断两次
      if (isHasItem) {
        text = "选项" + (this.editConfigCom.attribute.options.length + 1);
        const isHasItem =
          this.editConfigCom.attribute.options.filter((v) => v.name === text)
            .length > 0;
        if (isHasItem) {
          text = "选项" + (this.editConfigCom.attribute.options.length + 2);
        }
      }
      this.editConfigCom.attribute.options.push({
        label: text,
        name: text,
      });
    },
    onDeleteItem(index) {
      this.editConfigCom.attribute.options.splice(index, 1);
    },
    onClickHandleValues(op, name) {
      if (op) {
        this.editConfigCom.attribute.value.push(name);
      } else {
        const index = this.editConfigCom.attribute.value.findIndex(
          (v) => v === name
        );
        this.editConfigCom.attribute.value.splice(index, 1);
      }
    },
    onClickToolTip(op, index) {
      switch (op) {
        case 0: //复制
          const copyItem = JSON.parse(
            JSON.stringify(this.editConfigCom.attribute.options[index])
          );
          this.editConfigCom.attribute.options.push(copyItem);
          break;
        case 1: //删除
          this.editConfigCom.attribute.options.splice(index, 1);
          break;
        default:
      }
    },
    //----背景颜色选择器 start----
    handleActiveColor() {
      this.activeColor = handleGetRgbaObject(
        this.editConfigCom.attribute.checkboxGroupProps.activeColor
      );
      this.originalColor = this.activeColor;
    },
    open(ref) {
      // 打开颜色选择器
      this.$refs[ref].open();
    },
    resetColor() {
      this.originalColor = {
        r: 255,
        g: 183,
        b: 47,
        a: 1,
      };
      this.activeColor = this.originalColor;
      const rgba = this.originalColor;
      this.editConfigCom.attribute.checkboxGroupProps.activeColor =
        handleGetToRgba(rgba);
    },
    confirm(e) {
      const { rgba } = e;
      this.activeColor = rgba;
      this.editConfigCom.attribute.checkboxGroupProps.activeColor =
        handleGetToRgba(rgba);
    },

    //----背景颜色选择器 end----
  },
};
</script>

<style scoped lang="scss">
.u-slot-checkbox-list {
  background-color: white;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 6px;
  position: relative;
  padding: 13px 9px;
  .del {
    position: absolute;
    right: -8px;
    top: -8px;
  }
  .item {
    padding: 4px 0;
  }
}
.u-slot-color {
  display: flex;
  align-items: center;
  .color-box {
    margin-left: 10px;
    width: 100px;
    height: 35px;
    border: 1px solid lightgray;
  }
}
.color-picker {
  position: absolute;
  &-container {
    position: absolute;
    top: 20px;
    //left: -25px;
    z-index: 9999;
  }
}
.circle {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1px solid #888888;
  margin-right: 1px;
}
</style>
